<!-- 畅游鰼国 -->
<template>
  <div class="sightseeing_tour">

    <div class="sightseeing_tour-top-con">
      <birthland-top :birthlandTopData="birthlandTopData" @clickBirthland="clickBirthland"></birthland-top>
    </div>

<!-- 住在习水 -->
    <div class="sightseeing-tour-history">
      <img style="width: 80%; height:94px" :src="require('_as/title-5.png')" alt="">

      <keep-alive>
        <information-img-zoom
          :imgHeight="180"
          :imgWidth="294"
          :imgMarginTop="0"
          :imgMarginBottom="-15"
          :informationHeight="240"
          :informationConHeight="96"
          :marginBottomAll="120"
          :btnBottom="9"
          :btnLeft="36"
          :btnShow="false"
          :informationData="informationLiveData"
          @clickinformation="clickinformationHotel">
        </information-img-zoom>
      </keep-alive>

      <div class="historyBtn" @click="toHistoryMore">
        <span>查看更多</span>
      </div>

    </div>

<!-- 游遍习水 -->
    <div class="sightseeing-tour-history">
      <img style="width: 80%; height:94px;margin: 0 0 15px" :src="require('_as/title-6.png')" alt="">

      <div class="sightseeing-con">
        <alone-img-zoom :aloneWidth="600" :aloneHeight="490" :imgZoomData="imgZoomDataSight0" @clickSight="clickSight"></alone-img-zoom>
        <div class="sightseeing-con-right">
          <alone-img-zoom :aloneWidth="300" :aloneHeight="240" :imgZoomData="imgZoomDataSight1" @clickSight="clickSight"></alone-img-zoom>
          <alone-img-zoom :aloneWidth="300" :aloneHeight="240" :imgZoomData="imgZoomDataSight2" @clickSight="clickSight"></alone-img-zoom>
          <alone-img-zoom :aloneWidth="300" :aloneHeight="240" :imgZoomData="imgZoomDataSight3" @clickSight="clickSight"></alone-img-zoom>
          <alone-img-zoom :aloneWidth="300" :aloneHeight="240" :imgZoomData="imgZoomDataSight4" @clickSight="clickSight"></alone-img-zoom>
        </div>
      </div>

      <div class="btn" @click="toSightseeingMore">
        <span>查看更多</span>
      </div>
    </div>

<!-- 食遍习水 -->
    <div class="sightseeing-tour-history">
      <img style="width: 80%; height:94px; marginTop:0" :src="require('_as/title-7.png')" alt="">

      <keep-alive>
        <information-img-zoom
          :imgHeight="200"
          :imgWidth="263"
          :imgMarginTop="0"
          :imgMarginBottom="-64"
          :informationHeight="410"
          :informationData="informationFoodData"
          :btnMoreImgBg="serviceMoreBg"
          @clickinformation="clickinformationFood">
        </information-img-zoom>
      </keep-alive>

      <div class="btn" @click="toEatMore">
        <span>查看更多</span>
      </div>

    </div>

  </div>
</template>

<script>
import BirthlandTop from '_c/birthlandTop/birthland_top'
import AloneImgZoom from '_c/aloneImgZoom/alone_img_zoom'
import InformationImgZoom from '_c/informationImgZoom/information_img_zoom'

import changyou1 from '_as/changyou-2-1.png'
import changyou2 from '_as/changyou-2-2.png'
import changyou3 from '_as/changyou-2-3.png'

import serviceMoreBg from '_as/service-more.png'

import scrollAnimation from '@/api/scrollAnimation.js'

export default {
  data () {
    return {
      serviceMoreBg,
      birthlandTopData: [
        {
          id: 0,
          img: changyou1,
          title: '查看更多'
        },
        {
          id: 1,
          img: changyou2,
          title: '查看更多'
        },
        {
          id: 2,
          img: changyou3,
          title: '查看更多'
        }
      ],
      informationFoodData: [],
      informationLiveData: [],
      imgZoomDataSight0: {},
      imgZoomDataSight1: {},
      imgZoomDataSight2: {},
      imgZoomDataSight3: {},
      imgZoomDataSight4: {}
    }
  },
  components: {
    BirthlandTop,
    AloneImgZoom,
    InformationImgZoom
  },
  created () {
    this.getSecnicData()
    this.getHotelData()
    this.getFoodData()
  },
  mounted () {
    let needScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0
    scrollAnimation(needScrollTop, 0)
  },
  methods: {
    clickBirthland (item) {
      switch (item.id) {
        case 0:
          this.$router.push('/sightseeing_tour_secondary/2-3')
          break
        case 1:
          this.$router.push('/sightseeing_tour_secondary/2-5')
          break
        case 2:
          this.$router.push('/sightseeing_tour_secondary/2-6')
          break
        default:
          break
      }
    },
    toEatMore () {
      this.$router.push('/sightseeing_tour_secondary/2-1')
    },
    toSightseeingMore () {
      this.$router.push('/sightseeing_tour_secondary/2-4')
    },
    toHistoryMore () {
      this.$router.push('/sightseeing_tour_secondary/2-2')
    },
    clickinformationFood (item) {
      this.$router.push({
        path: '/sightseeing_tour_details',
        query: {
          id: item.id,
          title: item.title,
          type: 1
        }
      })
    },
    clickinformationHotel (item) {
      this.$router.push({
        path: `/hotelDetail/${item.id}/${item.title}`
      })
    },
    // 获取“住在习水”数据
    getHotelData () {
      this.$http.get('/v1/hotels', {
        pageSize: 4
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'informationImgZoom': item.thumbnailId,
            'informationBgImg': '',
            'title': item.name,
            'content': item.description
          })
        })
        this.informationLiveData = empt
      })
    },
    // 获取“游遍习水”数据
    getSecnicData () {
      this.$http.get('/v1/scenic', {
        pageSize: 5
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'title': item.name,
            'imgZoomItem': item.thumbUrl,
            'contentId': item.contentId
          })
        })
        this.imgZoomDataSight0 = empt[0]
        this.imgZoomDataSight1 = empt[1]
        this.imgZoomDataSight2 = empt[2]
        this.imgZoomDataSight3 = empt[3]
        this.imgZoomDataSight4 = empt[4]
      })
    },
    clickSight (item) {
      this.$router.push({
        path: '/sightseeing_tour_details',
        query: {
          id: item.id,
          title: item.title,
          contentId: item.contentId,
          type: 4
        }
      })
    },
    // 获取“食遍习水”数据
    getFoodData () {
      this.$http.get('/v2/food', {
        pageSize: 4
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            'id': item.id,
            'informationImgZoom': item.dishesImages,
            'title': item.dishesName,
            'content': item.dishesIntro,
            'informationBgImg': ''
          })
        })
        this.informationFoodData = empt
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.sightseeing_tour-top-con {
  margin 30px 0 0
}

.sightseeing-tour-history {
  width 100%
  position relative
  margin-top 20px
  img {
    margin 30px 0 20px
  }
  .sightseeing-con {
    min-height 490px
    display flex
    justify-content center
    padding-bottom 80px
    // align-items center
    .sightseeing-con-right {
      width 620px
      height 500px
      display flex
      flex-wrap wrap
    }
  }
  .btn {
    position absolute
    left 43%
    bottom 105px
    margin 0px auto
    &:hover {
      span {
        color #000
        border 1px solid #ddd
        box-shadow 0 0 30px 4px #ddd
      }
    }
    span {
      position absolute
      top 51px
      left 46px
      color #999
      width 100px
      padding 5px 10px
      cursor default
      border 1px solid #ddd
      border-radius 20px
    }
  }
  .historyBtn {
    position absolute
    left 43%
    bottom 50px
    margin 0px auto 15px
    &:hover {
      span {
        color #000
        border 1px solid #ddd
        box-shadow 0 0 30px 4px #ddd
      }
    }
    span {
      position absolute
      top 0px
      left 46px
      color #999
      width 100px
      padding 5px 10px
      cursor default
      border 1px solid #ddd
      border-radius 20px
    }
  }
}
</style>
